<template>
  <view class="body">
    <view class="top-box">
      <view class="box">
        <img class="img-box-bg" src="@/static/image/sport-box.png" alt="" />
        <view class="box-title">
          运动科普
          <img class="img-icon" src="@/static/image/more-white.png" alt="" />
        </view>
        <view class="check">立即查看</view>
      </view>
      <view class="box">
        <img class="img-box-bg" src="@/static/image/sport-box2.png" alt="" />
        <view class="box-title">
          健康评估
          <img class="img-icon" src="@/static/image/more-white.png" alt="" />
        </view>
        <view class="check">立即查看</view>
      </view>
    </view>
    <view class="scheme">
      <img class="scheme-bg" src="https://ainengli.hzjrsw.com/jkhx/weight/sports-bg.png" alt="" />
      <view class="scheme-title"> 今日运动方案 </view>
      <view class="content">
        <view class="sports">
          <view class="sports-text">有氧运动</view>
          <view class="sport-icon">
            <icon type="" class="iconfont icons icon-paobu1" />
          </view>
          <view class="sports-text">跑步</view>
          <view class="sports-time">运动1小时</view>
        </view>
        <view class="sports">
          <view class="sports-text">抗阻运动</view>
          <view class="sport-icon">
            <icon type="" class="iconfont icons icon-youyong1" />
          </view>
          <view class="sports-text">游泳</view>
          <view class="sports-time">运1.5小时</view>
        </view>
      </view>
    </view>
    <view class="recommend">
      <view class="recommend-title">
        <view class="title-text">运动推荐</view>
        <view class="take-more">
          查看更多
          <img class="img-more" src="@/static/image/my-arrow-right.png" alt="" />
        </view>
      </view>
      <view class="recommend-sports">
        <img class="back_img" src="https://ainengli.hzjrsw.com/jkhx/testYoGa.png" />
        <view class="Wrap">
          <view class="tag">今日推荐</view>
          <view class="title">瑜伽</view>
          <view class="detail">3.1MET · 中强度 · 37分钟</view>
        </view>
      </view>
      <view class="recommend-sports">
        <img class="back_img" src="https://ainengli.hzjrsw.com/jkhx/testYoGa.png" />
        <view class="Wrap">
          <view class="tag">今日推荐</view>
          <view class="title">健美操</view>
          <view class="detail">7.8MET · 高强度 · 35分钟</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import { formatDate } from '@/utils/util'
import { throttle, deepCopy } from '@/utils/tools'
import { onLoad, onShow } from '@dcloudio/uni-app'
</script>

<style lang="scss" scoped>
.body {
  position: relative;
  height: 100%;
  padding: 34rpx 32rpx;
  overflow: auto;

  .top-box {
    display: flex;
    gap: 24rpx;
    justify-content: space-between;
    margin-bottom: 32rpx;

    .box {
      position: relative;
      width: 50%;
      height: 160rpx;
      padding: 32rpx;
      border-radius: 24rpx;

      .img-box-bg {
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
        width: 331rpx;
        height: 160rpx;
      }

      .box-title {
        display: flex;
        align-items: center;
        font-size: 36rpx;
        font-weight: 700;
        color: #fff;

        .img-icon {
          width: 36rpx;
          height: 36rpx;
        }
      }

      .check {
        margin-top: 16rpx;
        font-size: 24rpx;
        font-weight: 400;
        color: #fff;
      }
    }
  }

  .scheme {
    position: relative;
    margin-bottom: 32rpx;

    .scheme-bg {
      position: absolute;
      top: 0;
      left: 0;
      width: 686rpx;
      height: 506rpx;
    }

    .scheme-title {
      position: relative;
      width: 100%;
      height: 120rpx;
      padding: 32rpx;
      font-size: 34rpx;
      font-weight: 700;
      color: #fff;
    }

    .content {
      position: relative;
      display: flex;
      gap: 24rpx;
      justify-content: space-between;
      padding: 24rpx;
      background: #fff;
      border-radius: 16rpx;

      .sports {
        width: 49%;
        padding: 32rpx 0;
        text-align: center;
        background: #fff;
        border: 1rpx solid #e5e6eb;
        border-radius: 16rpx;
        transform: rotateZ(360deg);

        .sports-text {
          font-size: 32rpx;
          font-weight: 700;
          color: #222;
        }

        .sport-icon {
          width: 96rpx;
          height: 96rpx;
          margin: 16rpx auto;
          line-height: 96rpx;
          text-align: center;
          vertical-align: middle;
          background: #f2fdfb;
          border-radius: 8rpx;

          .icons {
            font-size: 64rpx;
            color: #00d1b6;
          }
        }

        .sports-time {
          margin-top: 16rpx;
          font-size: 28rpx;
          font-weight: 400;
          color: #666;
        }
      }
    }
  }

  .recommend {
    padding: 32rpx 24rpx;
    background: #fff;
    border-radius: 16rpx;

    .recommend-title {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 24rpx;

      .title-text {
        font-size: 36rpx;
        font-weight: 700;
        color: #222;
      }

      .take-more {
        display: flex;
        align-items: center;
        font-size: 28rpx;
        font-weight: 400;
        color: #666;

        .img-more {
          width: 32rpx;
          height: 32rpx;
        }
      }
    }

    .recommend-sports {
      position: relative;
      width: 100%;
      height: 202rpx;
      padding: 22rpx 16rpx;
      margin-bottom: 22rpx;
      border-radius: 16rpx;

      .back_img {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1;
        width: 100%;
        height: 100%;
      }

      :last-child {
        margin: none;
      }

      .Wrap {
        position: relative;
        z-index: 2;

        .tag {
          width: 107rpx;
          height: 36rpx;
          font-size: 20rpx;
          font-weight: 500;
          line-height: 36rpx;
          color: #fff;
          text-align: center;
          background: #00d1b6;
          border-radius: 2rpx;
        }

        .title {
          margin: 48rpx 0 4rpx;
          font-size: 32rpx;
          font-weight: 700;
          color: #fff;
        }

        .detail {
          font-size: 24rpx;
          font-weight: 400;
          color: #fff;
        }
      }
    }
  }
}
</style>
